window.addEventListener('DOMContentLoaded', function () {
    // 获取元素
    const focus = document.querySelector('.focus');
    const arrowL = focus.querySelector('.arrow-l');
    const arrowR = focus.querySelector('.arrow-r');
    const ul = focus.querySelector('ul');
    const ol = focus.querySelector('.circle');

    // 自动轮播
    let index = 0;
    let timer;
    function autoPlay() {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            ul.style.transition = 'all .3s';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }, 2000)
    }
    autoPlay();

    // 左右箭头显隐
    focus.addEventListener('mouseenter', function () {
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
        autoPlay();
    });

    // 生成圆点
    for (let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li');
        ol.appendChild(li);
        // 设置索引
        li.setAttribute('data-index', i);
    }
    // 首个选中
    ol.children[0].className = 'current';
    // 点击小圆点
    ol.addEventListener('click', function (e) {
        if (e.target.nodeName == 'LI') {
            e.target.parentNode.querySelector('.current').className = '';
            e.target.className = 'current';
            // 获取索引
            index = e.target.getAttribute('data-index');
            ul.style.transition = 'all .3s';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`
        }
    });

    // 克隆节点，无缝连接
    let first = ul.children[0];
    let last = ul.children[ul.children.length - 1];
    ul.insertBefore(last.cloneNode(true), first);
    ul.appendChild(first.cloneNode(true));

    // 监听过渡完成
    // 设置节流阀
    let flag = true;
    focus.addEventListener('transitionend', function () {
        // 最后一张
        if (index > ol.children.length - 1) {
            index = 0;
            // 去除过渡效果
            ul.style.transition = 'none';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }
        // 第一张
        if (index < 0) {
            index = ol.children.length - 1;
            // 去除过渡效果
            ul.style.transition = 'none';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }
        // 小圆点选中
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
        // 打开节流阀
        flag = true;
    });

    // 点击右箭头
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (index > ol.children.length - 1) {
                index = 0;
                ul.style.transition = 'none';
                ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`
            }
            index++;
            ul.style.transition = 'all .3s';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`
        }
    });

    // 点击左箭头
    arrowL.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (index < 0) {
                index = ol.children.length - 1;
                ul.style.transition = 'none';
                ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`
            }
            index--;
            ul.style.transition = 'all .3s';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`
        }
    });

    // 拖动滑动
    let startX = 0; //初始位置
    let moveX = 0; //移动距离

    // 鼠标拖动
    // focus.addEventListener('mousedown', function (e) {
    //     // 关闭定时器
    //     clearInterval(timer);
    //     timer = null
    //     startX = e.pageX;
    //     // 监听鼠标移动
    //     focus.addEventListener('mousemove', move);
    //     function move(e) {
    //         moveX = e.pageX - startX;
    //         ul.style.transition = 'none';
    //         ul.style.transform = `translateX(${- index * focus.offsetWidth + moveX}px)`;
    //         flag = false;
    //     }
    //     // 监听鼠标弹起
    //     focus.addEventListener('mouseup', function () {
    //         // 移除移动监听
    //         focus.removeEventListener('mousemove', move);
    //         // 有过移动后
    //         if (!flag) {
    //             // 滑动距离超过50px时
    //             if (Math.abs(moveX) > 50) {
    //                 if (moveX > 0) {
    //                     index--;
    //                 } else {
    //                     index++;
    //                 }
    //                 ul.style.transition = 'all .3s';
    //             } else {
    //                 ul.style.transition = 'all .1s';
    //             }
    //             ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
    //         }
    //     });
    // });

    // 手指触摸
    focus.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        // 关闭定时器
        clearInterval(timer);
    });
    // 手指滑动
    focus.addEventListener('touchmove', function (e) {
        e.preventDefault();
        // 滑动距离
        moveX = e.targetTouches[0].pageX - startX;
        ul.style.transition = 'none';
        ul.style.transform = `translateX(${- index * focus.offsetWidth + moveX}px)`;
        flag = false;
    });
    // 手指离开
    focus.addEventListener('touchend', function (e) {
        // 有过滑动后
        if (!flag) {
            // 滑动距离超过50px时
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                ul.style.transition = 'all .3s';
            } else {
                ul.style.transition = 'all .1s';
            }
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }
        // 开启轮播
        autoPlay();
    })
});